<template>
	<div>
		<van-nav-bar
		  title="健康大药房"
		  left-text="返回"
		  right-text="按钮"
		  left-arrow
		  @click-left="onClickLeft()"
		  @click-right="onClickRight()"
		/>
		<div>
			<van-row>
				<van-col span="24">
					<van-search shape="round" v-model="value" placeholder="请输入搜索关键词" />
				</van-col>
			</van-row>	
		</div>
		<div>
			<van-row>
				<van-col span="10">
					<h3 style="color:aqua;">不仅全 更安全</h3>
				</van-col>
				<van-col span="14">
					<h5>自营正品·假一赔十·药师服务</h5>
				</van-col>
			</van-row>
			<div>
				<van-grid>
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/17438c9fe20940ccac832c398e81af9e_buluofen.png?Expires=1666789043&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=2LLmzBYrygXJLxSYPNkdEZWcM7I%3D" text="布洛芬" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/097f7bfda1a6459bbc7402962c924473_dakening.png?Expires=1666789103&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=ny0gcZSC8wcZNRdR4OUVITjgB%2Fs%3D" text="进口药品" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/d7cf4badc21e4f18b1d79fa7e823e5c3_aolisi.png?Expires=1666788912&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=RpUMIemXELksJEI9XDUtJSI5gNI%3D" text="慢性用品" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/d7a242496d2c46b68ab24c7596fbdadc_fufanganfenwan.png?Expires=1666789153&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=oZbOOqHUB9GyKol48ZsYQRgVgMw%3D" text="滋补保健" />
				</van-grid>
				<van-grid>
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/17438c9fe20940ccac832c398e81af9e_buluofen.png?Expires=1666789043&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=2LLmzBYrygXJLxSYPNkdEZWcM7I%3D" text="布洛芬" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/097f7bfda1a6459bbc7402962c924473_dakening.png?Expires=1666789103&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=ny0gcZSC8wcZNRdR4OUVITjgB%2Fs%3D" text="进口药品" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/d7cf4badc21e4f18b1d79fa7e823e5c3_aolisi.png?Expires=1666788912&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=RpUMIemXELksJEI9XDUtJSI5gNI%3D" text="慢性用品" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/d7a242496d2c46b68ab24c7596fbdadc_fufanganfenwan.png?Expires=1666789153&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=oZbOOqHUB9GyKol48ZsYQRgVgMw%3D" text="滋补保健" />
				</van-grid>
			</div>
		</div>
		<div >
			<van-row>
				<van-col span="1"></van-col>
				<p>猜你喜欢</p>
			</van-row>
		</div>
		<div @load="selectAll()" v-for="shop in shops" :key="shop">
			<van-card
			  :price="shop.price"
			  :desc="shop.desc"
			  :thumb="shop.adressname"
			>
			  <template #tags>
			    <van-tag plain type="danger">精品</van-tag>
			    <van-tag plain type="danger">好货</van-tag>
			  </template>
			  <template #footer>
			    <van-button @click="shopcat(shop)" size="mini">加购</van-button>
			    <van-button size="mini">购买</van-button>
			  </template>
			</van-card>
		</div>
		<div style="height: 200px;"></div>
	</div>
	<div style="margin-bottom: 0px;">
				<van-sticky>
					<van-tabbar v-model="active" route>
					  <van-tabbar-item replace to="/main" icon="home-o">首页</van-tabbar-item>
					  <van-tabbar-item replace to="/goodsort" icon="search">分类</van-tabbar-item>
					  <van-tabbar-item replace to="/shopcat" icon="friends-o">购物车</van-tabbar-item>
					  <van-tabbar-item replace to="/goods"  icon="manager-o">订单</van-tabbar-item>
					</van-tabbar>
				</van-sticky>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				shops:[
				],
				goods:{
					price:"",
					descs:"",
					thumb:""
				}
			}
		},
		// 事件加载完就触发这个事件
		mounted(){
			this.selectAll()
		},
		methods:{
			selectAll(){
				this.axios.get("http://localhost:9999/api/oss/test").then((res) =>{
					this.shops=res.data.data;
				})
			},
			onClickLeft() {
			this.$router.push("/") 
			},
			shopcat(s){
				this.goods.price=s.price
				this.goods.thumb=s.adressname
				this.goods.descs=s.desc
				alert(this.goods.descs)
				this.axios.post("http://localhost:9999/api/oss/shopcat",this.goods).then((res)=>{
					alert(res.data.msg)
				})
			}
		}
	}
</script>

<style>
	.my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    line-height: 150px;
	    text-align: center;
	    background-color: #39a9ed;
	  }
</style>
